/*
 * @Author: wangqizhang
 * @Date: 2024-05-05 11:31:43
 * @LastEditors: wangqizhang
 * @LastEditTime: 2024-05-24 19:08:04
 * @FilePath: /suixinji-react/src/components/NotePreview/index.tsx
 * @Description:
 *
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved.
 */
import { useLayoutEffect, useState } from 'react';

import { MdPreview, MdCatalog } from 'md-editor-rt';

type Props = {
  type: 'markdown' | 'rich-text';
  value: string;
};
const NotePreview = (props: Props) => {
  const [id] = useState('preview-only');
  const [scrollElement] = useState(document.documentElement);
  const text = props.value;
  useLayoutEffect(() => {
    if (props.type === 'rich-text') {
      const wrapper: any = document.getElementById('note-preview');
      wrapper.innerHTML = props.value;
    }
  }, [props]);
  return props.type === 'rich-text' ? (
    <div id="note-preview"></div>
  ) : (
    <>
      <MdPreview editorId={id} modelValue={text} />
      <MdCatalog editorId={id} scrollElement={scrollElement} />
    </>
  );
};
export default NotePreview;
